<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram</title>
<style>
    canvas {
        border: 1px solid #ccc;
    }
</style>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="380"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Set drawing styles
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';

    // 1. Draw the ground line
    ctx.beginPath();
    ctx.moveTo(40, 300);
    ctx.lineTo(460, 300);
    ctx.stroke();

    // 2. Draw the U-shaped box
    ctx.beginPath();
    // Outer left wall
    ctx.moveTo(100, 300);
    ctx.lineTo(100, 180);
    // Top of left wall
    ctx.lineTo(120, 180);
    // Inner left wall
    ctx.lineTo(120, 280);
    // Inner floor
    ctx.lineTo(380, 280);
    // Inner right wall
    ctx.lineTo(380, 180);
    // Top of right wall
    ctx.lineTo(400, 180);
    // Outer right wall
    ctx.lineTo(400, 300);
    ctx.stroke();

    // 3. Draw the slider block
    const blockX = 140;
    const blockH = 50;
    const blockW = 40;
    const blockY = 280 - blockH; // Place it on the inner floor
    ctx.beginPath();
    ctx.rect(blockX, blockY, blockW, blockH);
    ctx.stroke();
    
    // 4. Draw the velocity vector
    const centerX = blockX + blockW / 2;
    const centerY = blockY + blockH / 2;
    const arrowStartX = centerX;
    const arrowEndX = centerX + 100;
    const arrowY = centerY;

    ctx.beginPath();
    // Arrow shaft
    ctx.moveTo(arrowStartX, arrowY);
    ctx.lineTo(arrowEndX, arrowY);
    // Arrowhead
    ctx.moveTo(arrowEndX, arrowY);
    ctx.lineTo(arrowEndX - 12, arrowY - 6);
    ctx.moveTo(arrowEndX, arrowY);
    ctx.lineTo(arrowEndX - 12, arrowY + 6);
    ctx.stroke();

    // 5. Add labels
    // Mass 'm' for the slider
    ctx.font = 'italic 22px Times New Roman';
    ctx.textAlign = 'center';
    ctx.fillText('m', centerX, blockY - 8);

    // Mass 'm' for the box
    ctx.textAlign = 'left';
    ctx.fillText('m', 410, 270);

    // Velocity 'v₀'
    ctx.font = 'italic 22px Times New Roman';
    ctx.fillText('v', arrowEndX + 8, arrowY + 8);
    ctx.font = '16px Times New Roman'; // Smaller font for subscript
    ctx.fillText('0', arrowEndX + 19, arrowY + 12);

    // 6. Add the caption
    ctx.font = '24px "SimSun", "Songti SC"'; // Common Chinese font
    ctx.textAlign = 'center';
    ctx.fillText('力图 3.33.1', canvas.width / 2, 350);

</script>

</body>
</html>